<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <item-form @change="loadData" ref="itemform"></item-form>

        <div class="myheader">
            <div class="part-left">
                <div class="block">
                    <el-input v-model="kw" style="border-radius: 100%; width: 150px" size="small" placeholder="搜索key或value">
                        <!-- <el-button
                slot="append"
                icon="el-icon-search"
                @click="doSearch"
              /> -->
                    </el-input>
                    <el-button v-if="kw" type="text" size="small" @click="clearKw">清空</el-button>
                </div>
            </div>
            <div class="part-right">
                <div class="block">
                    <el-button size="small" icon="el-icon-refresh" round @click="loadData">刷新</el-button>
                </div>

                <template v-if="btns.admin_ui_config || true">
                    <div class="block">
                        <el-button v-if="btns.admin_ui_config || true" size="mini" type="primary" round icon="el-icon-plus"
                            @click="createHandle">创建</el-button>
                    </div>

                    <div class="block">
                        <el-button size="mini" round type="primary" @click="exportHandle">导出全部</el-button>
                    </div>

                    <div class="block">
                        <el-upload :headers="handlers" :show-file-list="false" :on-success="importHandle"
                            action="/api/admin6/sys_configs/upload">
                            <el-button size="mini" round type="primary">导入</el-button>
                        </el-upload>
                    </div>
                </template>
            </div>
        </div>
        <el-table v-loading="loading" :data="cItems" size="mini" fit highlight-current-row>
            <el-table-column prop="id" width="40px" label="#" />

            <el-table-column label="配置参数" prop="key" />
            <el-table-column prop="value" label="配置值" />
            <!-- <el-table-column prop="value" label="取值" /> -->
            <el-table-column prop="desc" label="描述" />

            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-link type="primary" @click="editHandle(scope.row)">设置</el-link>
                    <el-link v-if="scope.row.can_delete" type="text" size="small" style="color:red"
                        @click="deleteHandle(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped lang="scss">
.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .block {
            margin-left: 10px;
        }
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .block {
            margin-right: 10px;
        }
    }
}
</style>

<script>
import { getCofnigList, deleteConfig, exportSysConfig } from "@/api/sysconfig.js";
import MediaManager from "@/components/MediaManager/Index";
import ItemForm from "./ItemForm";
export default {
    components: { ItemForm, },
    name: "enumerations",
    props: {
        btns: { type: Object, default: {} },
    },
    data () {
        return {
            loading: false,
            currentItem: { name: "", id: 0, cat: '', },
            items: [],
            kw: '',
            resItems: []
        };
    },
    watch: {
        kw: function (newValue) {
            console.log('kw值被改变了', newValue)
            this.resItems = []
            if (newValue == '') {
                this.resItems = []
                return
            } else {
                this.items.forEach((item) => {
                    if (item.key.indexOf(newValue) != -1) {
                        this.resItems.push(item)
                    }
                    if (item.value.indexOf(newValue) != -1) {
                        this.resItems.push(item)
                    }
                })
            }
        }
    },
    computed: {
        cItems: function () {
            if (this.resItems.length == 0) {
                if (this.kw != '') {
                    return this.resItems
                }
                return this.items
            } else {
                return this.resItems
            }
        },
        handlers: function () {
            return { Authorization: `Bearer ${this.$store.state.user.token}` };
        },
    },
    created: function () {
        this.loadData();
    },
    methods: {
        importHandle: function (e) {
            this.$message.success("导入成功！");
            this.loadData();
        },
        exportHandle: function () {
            this.loading = true;
            exportSysConfig().then((res) => {
                this.loading = false;
                const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                // 创建一个a标签
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob); // 设置文件的URL
                link.download = 'sys_configs.xlsx'; // 设置文件的下载名称

                // 模拟用户点击链接进行下载
                link.click();

                // 释放URL对象
                URL.revokeObjectURL(link.href);
            });
        },

        createHandle: function () {
            var item = {
                url: "",
                name: "",
                desc: "",
                key: "",
                width: 100,
                height: 100,
            };
            this.$refs.itemform.openDialog(item);
        },

        editHandle: function (item) {
            this.$refs.itemform.openDialog(item);
        },

        itemChanged: function () {
            this.loadData();
        },


        loadData: function () {
            getCofnigList().then((resp) => {
                this.items = resp.data
                this.loading = false;
            });
        },

        deleteHandle: function (id) {

            this.$confirm("确定要删除这个参数吗？").then(() => {
                // deleteTag(id).then((resp) => {
                //   if (resp.status === 0) {
                //     this.$message({ type: "success", message: "删除标签成功！" });
                //     this.loadData();
                //   }
                // });
                console.log(id)
                deleteConfig(id).then((res) => {
                    if (res.status === 0) {
                        this.$message({ type: "success", message: "删除成功！" });
                        this.loadData();
                    }
                })
            });
        },

        // doSearch: function () {
        //   var kw = this.kw
        //   var jieguo = []
        //   this.items.forEach((item)=>{
        //     if(item.cat.indexOf(kw) != -1 ){
        //       jieguo.push(item)
        //     }
        //     if(item.name.indexOf(kw) != -1 ){
        //       jieguo.push(item)
        //     }
        //   })
        //   console.log('66666',jieguo)
        //   this.items = jieguo
        // },

        clearKw: function () {
            this.kw = ''
            // this.loadData()
        },
    },
};
</script>
